<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试</title>
<style type="text/css">
	#menu {
		width:300px;
	}
	.has_children {
		background:blue;
		color:red;
		cursor:pointer;
	}
	.highlight {
		color:orange;
		background:black;
	}
	div {
		padding:0px;
		margin:1px 0;
	}
	div a {
		background:yellow;
		display:none;
		float:left;
		width:300px;
	}
</style>
<script type="text/javascript" src="../script/jquery-1.3.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){						//等待dom元素加载完毕.
		$(".has_children").click(function(){
			$(this).addClass("highlight")				//为当前元素增加highlight类
				.children("a").show().end()				//将子节点的a元素显示出来并重新定位到上次操作的元素
			.siblings().removeClass("highlight").		//获取元素的兄弟元素，并去掉他们的highlight类
				children("a").hide();					//将兄弟元素下的a元素隐藏
		});
	});
</script>
</head>
<body>
<div id="menu">
	<div class="has_children">
		<span>第一章 绪论</span>
		<a>1.1  研究背景</a>
		<a>1.2  研究意义</a>
		<a>1.3 论文结构</a>
	</div>
	<div  class="has_children">
		<span>第二章 系统的分析</span>
		<a>2.1 过程分析</a>
		<a>2.2业务流程分析</a>
		<a>2.3数据流程分析</a>
	</div>
	<div  class="has_children">
		<span>第三章 系统设计</span>
		<a>3.1总体设计</a>
		<a>3.2详细设计</a>
		<a>3.3数据字典</a>	
	</div>
</div>
</body>
</html>